<template>
    <div class="container">
        <div class="handle-box">
            <el-form ref="form" :inline="true" :model="form">
                <el-form-item label="">
                    <div class="block w">
                        <el-date-picker
                            @change="handleChange"
                            class="w"
                            v-model="form.date"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        >
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-button type="default" @click="handleSevenDays">7天</el-button>
                <el-button type="default" @click="handleMonthly">30天</el-button>
                <el-button type="default" @click="handleAll">全部</el-button>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <!-- <el-form-item label="">
                    <el-select
                        @change="handleSearch"
                        v-model="query.typeName"
                        placeholder="请选择会员类型"
                        :clearable="true"
                        class="handle-select mr10"
                        style="margin-left:10px;"
                    >
                        <el-option key="0" label="vip" :value="true"></el-option>
                        <el-option key="1" label="svip" :value="false"></el-option>
                    </el-select>
                </el-form-item> -->
            </el-form>
        </div>
        <div class="statistics">
            <div class="space">
                <button
                    ref="add"
                    :style="{
                        background: 'rgba(0,0,0,0.7)',
                        color: '#fff',
                        border: 'none',
                        width: '80px',
                        height: '30px',
                        cursor: 'pointer'
                    }"
                    @click="handleAdd"
                >
                    新增
                </button>
                <button
                    ref="active"
                    :style="{
                        background: 'rgba(0,0,0,0.3)',
                        color: '#fff',
                        border: 'none',
                        width: '80px',
                        height: '30px',
                        cursor: 'pointer'
                    }"
                    @click="handleActive"
                >
                    活跃
                </button>
            </div>
            <div ref="broken-line" class="broken-line"></div>
        </div>
        <hr style=" margin-bottom:10px;" />
        <div class="handle-box_">
            <el-button type="primary">导出</el-button>
        </div>
        <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
            <el-table-column width="auto" label="时间" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">{{ scope.row.day }}</template>
            </el-table-column>
            <el-table-column width="auto" label="付费用户数" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">{{ scope.row.total }}</template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                background
                layout="total,sizes, prev, pager, next, jumper"
                :page-sizes="[5, 10, 20, 30]"
                @size-change="handleSizeChange"
                :current-page="query.pageIndex"
                :page-size="query.pageSize"
                :total="pageTotal"
                @current-change="handlePageChange"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import NProgress from 'nprogress';
export default {
    data() {
        return {
            query: {
                sevenDays: null,
                monthly: null,
                startTime: null,
                endTime: null,
                // typeName: true,
                status: 10,
                pageIndex: 0,
                pageSize: 10
            },
            pageTotal: 0,
            tableData: [
                {
                    id: 1,
                    name: '张三',
                    money: 123,
                    address: '广东省东莞市长安镇',
                    state: '成功',
                    date: '2019-11-1',
                    thumb: 'https://lin-xin.gitee.io/images/post/wms.png'
                }
            ],
            form: {
                date: null
            },
            // 指定图表的配置项和数据
            option: {
                tooltip: {
                    //设置tip提示
                    trigger: 'axis'
                },
                legend: {
                    //设置区分（哪条线属于什么）
                    // data: ['学生成绩']
                },
                color: ['#666'], //设置区分（每条线是什么颜色，和 legend 一一对应）
                xAxis: {
                    //设置x轴
                    type: 'category',
                    boundaryGap: false, //坐标轴两边不留白
                    data: ['2019-1-1', '2019-2-1', '2019-3-1', '2019-4-1', '2019-5-1', '2019-6-1', '2019-7-1'],
                    name: '日期', //X轴 name
                    nameTextStyle: {
                        //坐标轴名称的文字样式
                        color: '#333',
                        fontSize: 16,
                        padding: [0, 0, 0, 20]
                    },
                    axisLine: {
                        //坐标轴轴线相关设置。
                        lineStyle: {
                            color: '#333'
                        }
                    }
                },
                yAxis: {
                    name: '付费用户数',
                    nameTextStyle: {
                        color: '#333',
                        fontSize: 16,
                        padding: [0, 0, 10, 0]
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#333'
                        }
                    },
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}w'
                    }
                },
                series: [
                    {
                        // name: '学生成绩',
                        data: [20, 20, 40, 10, 40, 10, 0],
                        type: 'line',
                        lineStyle: {
                            normal: {
                                color: '#666',
                                width: 1
                            }
                        }
                    }
                ]
            }
        };
    },
    computed: {
        ...mapGetters(['channelId', 'region'])
    },
    created() {
        // this.getData();
        if (this.channelId || this.region) {
            this.getData();
        }
    },
    watch: {
        '$store.state.app.channelId'(a, b) {
            console.log(a);
            if (a != '') {
                this.$set(this.query, 'pageIndex', 0);
                this.getData();
            }
        },
        '$store.state.app.region'(a, b) {
            console.log(a);
            if (a != '') {
                this.$set(this.query, 'pageIndex', 0);
                this.getData();
            }
        }
    },
    methods: {
        handleChange(date) {
            console.log(date);
            if (date != null) {
                this.query.startTime = this.$standardDateToLocal(date[0], 'yyyy-mm-dd', '-');
                this.query.endTime = this.$standardDateToLocal(date[1], 'yyyy-mm-dd', '-');

                this.$set(this.query, 'monthly', null);
                this.$set(this.query, 'sevenDays', null);
            } else {
                this.query.startTime = null;
                this.query.endTime = null;
                this.$set(this.query, 'monthly', null);
                this.$set(this.query, 'sevenDays', null);
            }
            // this.getData();
            this.handleSearch();
        },
        async getData() {
            try {
                NProgress.start();
                const url = '/data/pay/user/list';
                const { data: res } = await this.$http[0].get(url, {
                    params: {
                        page: this.query.pageIndex,
                        size: this.query.pageSize,
                        status: this.query.status,
                        region: this.region,
                        channelId: this.channelId,
                        // typeName: this.query.typeName,
                        sevenDays: this.query.sevenDays,
                        monthly: this.query.monthly,
                        startTime: this.query.startTime,
                        endTime: this.query.endTime
                    }
                });
                console.log(res);
                if (res.data.content && res.data.content.length > 0) {
                    this.option.series[0].data = [];
                    this.option.xAxis.data = [];
                    var content = res.data.content;
                    for (var i = content.length - 1; i >= 0; i--) {
                        this.option.series[0].data.push(content[i].total);
                        this.option.xAxis.data.push(content[i].day);
                    }
                    this.drawBrokenLine();
                    this.tableData = res.data.content;
                    this.pageTotal = res.data.totalElements || 0;
                } else {
                    this.option.series[0].data = [];
                    this.option.xAxis.data = [];
                    this.tableData = [];
                    this.pageTotal = 0;
                    this.drawBrokenLine();
                }
                NProgress.done();
            } catch (err) {
                console.dir(err);
                NProgress.done();
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        handleSevenDays() {
            this.$set(this.query, 'sevenDays', 'true');
            this.$set(this.query, 'monthly', null);
            this.$set(this.query, 'startTime', null);
            this.$set(this.query, 'endTime', null);
            this.$set(this.form, 'date', null);
            this.handleSearch();
        },
        handleMonthly() {
            this.$set(this.query, 'monthly', 'true');
            this.$set(this.query, 'sevenDays', null);
            this.$set(this.query, 'startTime', null);
            this.$set(this.query, 'endTime', null);
            this.$set(this.form, 'date', null);
            this.handleSearch();
        },
        handleAll() {
            this.$set(this.query, 'sevenDays', null);
            this.$set(this.query, 'monthly', null);
            this.$set(this.query, 'startTime', null);
            this.$set(this.query, 'endTime', null);
            this.$set(this.form, 'date', null);
            this.handleSearch();
        },
        handleSearch() {
            this.$set(this.query, 'pageIndex', 0);
            this.getData();
        },
        drawBrokenLine() {
            this.chartLine = this.$echarts.init(this.$refs['broken-line']);

            // 使用刚指定的配置项和数据显示图表。
            this.chartLine.setOption(this.option);
            window.addEventListener('resize', () => {
                this.chartLine.resize();
            });
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        },
        handleSizeChange(val) {
            this.$set(this.query, 'pageSize', val);
            this.getData();
        },
        handleAdd() {
            this.$refs['add'].style.background = 'rgba(0,0,0,0.7)';
            this.$refs['active'].style.background = 'rgba(0,0,0,0.3)';

            this.$set(this.query, 'status', 10);
            this.$set(this.query, 'pageIndex', 0);
            this.getData();
        },
        handleActive() {
            this.$refs['add'].style.background = 'rgba(0,0,0,0.3)';
            this.$refs['active'].style.background = 'rgba(0,0,0,0.7)';

            this.$set(this.query, 'status', 20);
            this.$set(this.query, 'pageIndex', 0);
            this.getData();
        }
    },
    mounted() {
        // this.drawBrokenLine();
    },
    activated() {}
};
</script>
<style lang="scss" scoped>
.container {
    .statistics {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        .space {
            width: 400px;
            height: 500px;
            display: inline-block;
            .content {
                background-color: rgba(16, 16, 16, 0.76);
                color: #fff;
                width: 250px;
                height: auto;
                margin-top: 20px;
                font-size: 14px;
            }
        }
        .broken-line {
            width: 100%;
            height: 500px;
            display: inline-block;
        }
    }

    .handle-box,
    .handle-box_ {
        margin-bottom: 20px;
    }
    .handle-box_ {
        text-align: right;
    }

    .handle-select {
        width: auto;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
}
</style>
